<!--pages/more/index.html-->
<section class="my">
    <tabBar route tabBarPosition="bottom" @onChange="changeBack">
        <tabBarItem title="首页" :icon="info" :selectedIcon="info_active" link="/pages/info/index">





        </tabBarItem>
        <!-- <tabBarItem title="上传" :icon="up" :selectedIcon="up_active" link="/pages/upload/index">
        </tabBarItem> -->
        <tabBarItem title="传输" :icon="down" :selectedIcon="down_active" link="/pages/download/index">
        </tabBarItem>
        <tabBarItem selected title="我的" :icon="user" :selectedIcon="user_active" link="/pages/my/index">

            <div class="my_content">
                <!-- 标题 -->
                <div class="title">
                    <div class="my_content_title">
                        天翼云盘
                    </div>
                    <div class="my_item">
                        <div v-if="userInfo.headPortraitUrl" class="item_img">
                            <img :src="userInfo.headPortraitUrl" alt="">
                        </div>
                        <div v-else class="item_img">
                            <img src="../../assets/images/author.png" alt="">
                        </div>
                        <div class="item_mid">
                            <div class="font-500">{{userInfo.accountName}}</div>
                            <div>
                                <span class="vip_name">{{userInfo.vipName}}</span>
                                <!-- <span> | </span> -->
                                <!-- <span>总容量:{{userInfo.totalSizeName}}</span> -->
                            </div>
                        </div>
                      
                    </div>

                    <div class="total">
                        <div>总空间{{userInfo.mainTotalSizeName}}</div>
                        <Progress class="custom custom_0" type="bar" :percent="userInfo.percent"
                            position="normal"  :barStyle="barStyle"
                            :backStyle="backStyle"/>
                        <div class="flex justify-between" style="font-size: 12px;">
                            <span>已用{{userInfo.mainUsedSizeName}}</span>
                            <span>剩余{{userInfo.mainRemainSizeName}}</span>
                        </div>
                    </div>
                    
                </div>
                <div class="logout flex justify-between" @click="logout">
                    <div>
                        <img src="../../assets/images/logout.png" alt="" style="margin-right:10px">
                        <span style="white-space: nowrap;">{{panType=='2' ? '退出百度授权' : '退出阿里授权'}}</span>
                    </div>
                    <img src="../../assets/images/logout2.png" alt="">
                </div>



                <div class="bottomLogo">
                    <img src="../../assets/images/bottomLogo.png" alt="">
                </div>
                <!-- <div style="padding:10px;">
                    天翼云盘
                </div>
                <div style="padding:10px;">
                    总容量{{userInfo.mainTotalSizeName}} | 已使用容量{{userInfo.mainUsedSizeName}} |
                    剩余容量{{userInfo.mainRemainSizeName}}
                </div> -->
            </div>
        </tabBarItem>
    </tabBar>
</section>